//console.log("This is Clock!");

;(function(){
	
	var clock   = document.getElementById("clock"),
		ctx     = clock.getContext('2d'),
		cWidth  = ctx.canvas.width,
		cHeight = ctx.canvas.height,
		t       = null;
		
	var Clock = function(opt){
		this.panelBgColor       = opt.panelBgColor;
		this.hourColor          = opt.hourColor;
		this.hourFont           = opt.hourFont;
		this.indicatorColor     = opt.indicatorColor;
		this.indicatorHighlight = opt.indicatorHighlight;
		this.r                  = cWidth / 2;
		
	}
	
	Clock.prototype = {
		hours: [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2],
		init: function(){
			this.draw();
			
			t = setInterval(this.draw.bind(this), 1000);
		},
		
		draw: function(){
			ctx.clearRect(0, 0, cWidth, cHeight);    //清除画布
			var hour   = getTime().hour,
				minute = getTime().minute,
				second = getTime().second;
				
			this.drawPanel();
			this.drawHourNums();
			this.drawHourIndicator(hour,minute);
			this.drawMinuteIndicator(minute);
			this.drawCentralPoint();
			this.drawSecondIndicator(second);
			ctx.restore();                      //恢复
		},
		
		drawPanel: function(){
			ctx.save();
			ctx.translate(this.r,this.r);
			ctx.beginPath();
			ctx.fillStyle = this.panelBgColor;
			ctx.arc(0, 0, this.r - 25, 0, 2 * Math.PI, false);
			ctx.fill();
		},
		
		drawHourNums: function(){
			var hours = this.hours,
				radius,
				x,
				y;
				
			ctx.fillStyle    = this.hourColor;
			ctx.font         = '55px Arial';
			ctx.textAlign    = 'center';
			ctx.textBaseline = 'middle';
			
			hours.forEach(function(elem,idx){
				radius  = 2 * Math.PI / 12 * idx ;
				x       = Math.cos(radius) * (this.r - 60);
				y       = Math.sin(radius) * (this.r - 60);
				ctx.beginPath();
				ctx.fillText(elem, x, y);
			}, this);
		},
		
		drawCentralPoint: function(){
			ctx.beginPath();
			ctx.fillStyle = this.hourColor;
			ctx.arc(0, 0, 13, 0, 2 * Math.PI, false);
			ctx.fill();
			
			
			ctx.beginPath();
			ctx.fillStyle = this.indicatorColor;
			ctx.arc(0, 0, 6, 0, 2 * Math.PI,false);
			ctx.fill();
		},
		
		drawHourIndicator: function(hour, minute){
			var hRadius = 2 * Math.PI / 12 * hour,
				mRadius = 2 * Math.PI / 12 / 60 * minute;
			
			ctx.save();
			ctx.beginPath();
			ctx.strokeStyle = this.indicatorColor;
			ctx.lineCap     = "round";
			ctx.lineWidth   = 5;
			ctx.rotate(hRadius + mRadius);
			ctx.moveTo(0, 30);
			ctx.lineTo(0, - this.r / 1.8);
			ctx.stroke();
			ctx.restore();
		},
		
		drawMinuteIndicator: function(minute){
			var radius = 2 * Math.PI / 60 * minute;
			
			ctx.save();
			ctx.beginPath();
			ctx.strokeStyle  = this.indicatorColor;
			ctx.lineCap      = 'round';
			ctx.lineWidth    = 5;
			ctx.rotate(radius);
			ctx.moveTo(0, 30);
			ctx.lineTo(0, - this.r + 55);
			ctx.stroke();
			ctx.restore();
		},
		
		drawSecondIndicator: function(second){
			var radius = 2 * Math.PI / 60 * second;
			
			ctx.save();
			ctx.beginPath();
			ctx.strokeStyle  = this.indicatorHighlight;
			ctx.lineCap      = 'round';
			ctx.lineWidth    = 3;
			ctx.rotate(radius);
			ctx.moveTo(0, 40);
			ctx.lineTo(0, - this.r + 40);
			ctx.stroke();
			ctx.restore();
		}
	}
	
	function getTime(){
		var d = new Date();
		
		return {
			hour: d.getHours(),
			minute: d.getMinutes(),
			second: d.getSeconds()
		}
	}
	
	//new Clock().init();
	window.Clock = Clock;
})();
